import { DatePicker, Descriptions, Input, Select, Modal, message } from 'antd';
import moment from 'moment';
import React from 'react';
import {educationList,sexList,roleList,targsList} from '@/components/function/globalData'
import UserInfoController from '@/services/UserInfoService/UserInfoController';
import DepartmentController from '@/services/System/DepartmentController';
import {getKey,getStr} from '@/components/function'

const {Option}=Select
const {confirm}=Modal
const {TextArea}=Input
class UserDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            datas:{ },
            type:props.type||2,//type等于1为新建，2为修改
            rowData:props.rowData,
            disabled:props.disabled,
            provinceDepartmentList:[],
            cityDepartmentList:[],
         
          
         };
    }
    componentWillMount(){
        let {rowData,provinceDepartmentList,cityDepartmentList} = this.state

        DepartmentController.getList({to_stop:'1'}).then(r=>{
            if(r&&r.status===200){
                r.data.rows.map(item=>{
                    if(item.type==='省级'){
                        provinceDepartmentList.push({value:item.id,name:item.name})}
                    if(item.type==='市级'){
                        cityDepartmentList.push({value:item.id,name:item.name})}
                })
                this.setState({provinceDepartmentList,cityDepartmentList})
            }
        })
    }
    componentDidMount(){
        this.props.onRef(this)
        let {rowData} = this.state
        if(rowData){
            UserInfoController.getUserInfo(rowData.userName).then(r=>{
                if(r&&r.status===200){
                    this.setState({
                        datas:r.data[0]
                    })
                }
            })
        }
    }
    handleChange=(key,type,e)=>{
        let {datas}=this.state
        switch(type){
            case 'select':
                datas[key]=e;
                break;
            case 'text':
                datas[key]=e.target.value;
                break;
            default:break
        }
        this.setState({datas})
    }

    dateChange=(dates,dateStrs)=>{
        let {datas}=this.state
        datas['birthday'] = dateStrs
        this.setState({datas})

        
    }
    submit=()=>{
        let {datas,type,provinceDepartmentList,cityDepartmentList}=this.state
        let that = this
        if(!datas.judge){
            message.error('请检查该账户是否可用',3)
            return;
        }
        if(!datas.userName){
            message.error('请输入姓名',3)
            return;
        }
        if(!datas.sex){
            message.error('请选择性别',3)
            return;
        }
        if(!datas.provinceDepartmentCode){
            message.error('请选择省级部门',3)
            return;
        }
        if(!datas.roleId){
            message.error('请选择角色',3)
            return;
        }
        datas.provinceDepartmentName =getKey(datas.provinceDepartmentCode,provinceDepartmentList)
        datas.cityDepartmentName = getKey(datas.cityDepartmentCode,cityDepartmentList)
        datas.roleName = getKey(datas.roleId,roleList)
        datas.targs = getKey(datas.targsId,targsList)
        datas.education = getKey(datas.educationId,educationList)
        confirm({
            title:'确认',
            content:'确定要提交吗？',
            onOk(){
                if(type===1){
                    UserInfoController.createdSubmit(datas).then(r=>{
                        if(r&&r.status===200){
                            message.success('提交成功')
                            that.props.onCancel()
                        }
                    })
                }
                if(type=2){
                    UserInfoController.updateSubmit(datas).then(r=>{
                        if(r&&r.status===200){
                            message.success('提交成功')
                            that.props.onCancel()
                        }
                    })
                }
            }
        })

    }
 
    showSelect=(datas,values,key,disabled=false)=>{
        return<Select onChange={this.handleChange.bind(this,key,'select')} value={values} style={{width:200}} disabled={disabled}>
            {datas&&datas.map((item,index)=><Option value={item.value} key={index}>{item.name}</Option>)}
            </Select>
    }
    showInput=(values,key,width,disabled=false)=>{
        return<Input value={values} onChange={this.handleChange.bind(this,key,'text')} style={width}  disabled={disabled}/>}
    checkUserName=()=>{
        let {datas,rowData}=this.state
        UserInfoController.getUserInfo(datas.userName).then(r=>{
            if(r&&r.status===200){
                if(r.data.length>0&&r.data[0].id!==rowData.id){
                    message.error('该账号已存在，请重新输入')
                    datas.userName=''
                    datas.judge=false
                }
                else{
                    message.success('该账号可以使用')
                    datas.judge=true
                }
                this.setState({datas})

            }
            
        })
    }
    render() {
        const {datas,provinceDepartmentList,cityDepartmentList,disabled}=this.state
        return (
            <Descriptions title='个人详情' bordered>
                {/* <Descriptions.Item label={'编号'}>{datas.id}</Descriptions.Item> */}
                <Descriptions.Item label={'登录账号'}>{this.showInput(datas.userName,'userName',{width:300})}<a onClick={this.checkUserName}>检查</a></Descriptions.Item>
                <Descriptions.Item label={'人员姓名'}>{this.showInput(datas.name,'name')}</Descriptions.Item>
                <Descriptions.Item label={'人员性别'}>{this.showSelect(sexList,datas.sex,'sex')}</Descriptions.Item>
                <Descriptions.Item label={'学历'}>{this.showSelect(educationList,datas.educationId,'educationId')}</Descriptions.Item>
                <Descriptions.Item label={'出生日期'}><DatePicker onChange={this.dateChange} value={datas.birthday?moment(datas.birthday):''} style={{width:150}}/></Descriptions.Item>
                <Descriptions.Item label={'省级部门'}>{this.showSelect(provinceDepartmentList,datas.provinceDepartmentCode,'provinceDepartmentCode',disabled)}</Descriptions.Item>
                <Descriptions.Item label={'市级部门'}>{this.showSelect(cityDepartmentList,datas.cityDepartmentCode,'cityDepartmentCode',disabled)}</Descriptions.Item>
                <Descriptions.Item label={'电话'}>{this.showInput(datas.phone,'phone')}</Descriptions.Item>
                <Descriptions.Item label={'邮箱'}>{this.showInput(datas.email,'email')}</Descriptions.Item>
                <Descriptions.Item label={'角色'}>{this.showSelect(roleList,datas.roleId,'roleId',disabled)}</Descriptions.Item>
                <Descriptions.Item label={'标签'}>{this.showSelect(targsList,datas.targsId,'targsId',disabled)}</Descriptions.Item>
                <Descriptions.Item label={'地址'}>{this.showInput(datas.address,'address')}</Descriptions.Item>
                <Descriptions.Item label={'个人简介'} span={3}><TextArea onChange={this.handleChange.bind(this,'description','text')} value={datas.description}></TextArea></Descriptions.Item>
            </Descriptions>

        );
    }
}

export default UserDetail;